<template>
  <view>
    <view
      v-show="show"
      :style="{ top: offsetTop + 'px' }"
      class="uni-mask"
      @click="hide"
      @touchmove.stop.prevent="moveHandle"/>
    <view
      v-show="show"
      :class="'uni-popup-' + position + ' ' + 'uni-popup-' + mode"
      class="uni-popup">
      {{ msg }}
      <slot/>
      <view
        v-if="position === 'middle' && mode === 'insert'"
        :class="{
          'uni-close-bottom': buttonMode === 'bottom',
          'uni-close-right': buttonMode === 'right'
        }"
        class="uni-icon uni-icon-close"
        @click="closeMask"/>
    </view>
  </view>
</template>

<script>
export default {
  name: 'UniPopup',
  props: {
    /**
			 * 页面显示
			 */
    show: {
      type: Boolean,
      default: false
    },
    /**
			 * 对齐方式
			 */
    position: {
      type: String,
      // top - 顶部， middle - 居中, bottom - 底部
      default: 'middle'
    },
    /**
			 * 显示模式
			 */
    mode: {
      type: String,
      default: 'insert'
    },
    /**
			 * 额外信息
			 */
    msg: {
      type: String,
      default: ''
    },
    /**
			 * h5遮罩是否到顶
			 */
    h5Top: {
      type: Boolean,
      default: false
    },
    buttonMode: {
      type: String,
      default: 'bottom'
    }
  },
  data () {
    return {
      offsetTop: 0
    }
  },
  watch: {
    h5Top (newVal) {
      if (newVal) {
        this.offsetTop = 44
      } else {
        this.offsetTop = 0
      }
    }
  },
  created () {
    let offsetTop = 0
    // #ifdef H5
    if (!this.h5Top) {
      offsetTop = 44
    } else {
      offsetTop = 0
    }
    // #endif
    this.offsetTop = offsetTop
  },
  methods: {
    hide () {
      if (this.mode === 'insert' && this.position === 'middle') return
      this.$emit('hidePopup')
    },
    closeMask () {
      if (this.mode === 'insert') {
        this.$emit('hidePopup')
      }
    },
    moveHandle () {}
  }
}
</script>
<style>
	.uni-mask {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.uni-popup {
		position: fixed;
		z-index: 999;
		background-color: #ffffff;
	}

	.uni-popup-middle {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.uni-popup-middle.uni-popup-insert {
		min-width: 380upx;
		min-height: 380upx;
		max-width: 100%;
		max-height: 80%;
		transform: translate(-50%, -65%);
		background: none;
		box-shadow: none;
	}

	.uni-popup-middle.uni-popup-fixed {
		border-radius: 10upx;
		padding: 30upx;
	}

	.uni-close-bottom,
	.uni-close-right {
		position: absolute;
		bottom: -180upx;
		text-align: center;
		border-radius: 50%;
		color: #f5f5f5;
		font-size: 60upx;
		font-weight: bold;
		opacity: 0.8;
		z-index: -1;
	}
	.uni-close-bottom {
		margin: auto;
		left: 0;
		right: 0;
	}
	.uni-close-right {
		right: -60upx;
		top: -80upx;
	}

	.uni-close-bottom:after {
		content: '';
		position: absolute;
		width: 0px;
		border: 1px #f5f5f5 solid;
		top: -200upx;
		bottom: 56upx;
		left: 50%;
		transform: translate(-50%, -0%);
		opacity: 0.8;
	}

	.uni-popup-top {
		top: 0;
		left: 0;
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		text-align: center;
	}

	.uni-popup-bottom {
		left: 0;
		bottom: 0;
		width: 100%;
		min-height: 100upx;
		line-height: 100upx;
		text-align: center;
	}
</style>
